<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script type="text/javascript" src="../libraries/RGraph.common.core.js" ></script>
    <script type="text/javascript" src="../libraries/RGraph.common.dynamic.js" ></script>
    <script type="text/javascript" src="../libraries/RGraph.common.tooltips.js" ></script>
    <script type="text/javascript" src="../libraries/RGraph.drawing.rect.js" ></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A heat-map like chart using the drawing API rect object</title>
    
    <meta name="description" content="An example of the drawing API rect object" />
</head>
<body>
        
    <h1>A heat map like chart using the drawing API rect object</h1>
    
    <p>
        This chart was inspired by Facebooks "heat map"-esque visualisation for determining what computers (though it doesn't have to be
        computers) are either malfunctioning or sending alerts. In a large datacenter each column could be a particular rack and each
        individual square a specific computer.
    </p>
    
    <p>
        Each individual square is a drawing API Rect object - so each can be assigned its own tooltip, colors and click/mousemove events.
    </p>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

    <script>
        /**
        * The "data" that determines the colour of the blocks
        */
        alerts = [];
        alerts['34,7'] = {'color':'red','message':'Computer #37 is broken and needs shutting down and repairing'}
        alerts['52,7'] = {'color':'red','message':'Computer #68 is broken and needs shutting down and repairing'}
        alerts['53,7'] = {'color':'red','message':'Computer #69 is broken and needs shutting down and repairing'}
        alerts['54,7'] = {'color':'red','message':'Computer #70 is broken and needs shutting down and repairing'}
        alerts['14,19'] = {'color':'red','message':'Computer #135 is running hot','color':'yellow'}
        alerts['14,20'] = {'color':'red','message':'Computer #139 is loose','color':'yellow'}
        alerts['14,21'] = {'color':'red','message':'Computer #139 is old','color':'orange'}
        alerts['45,21'] = {'color':'red','message':'Computer #139 is old','color':'orange'}
        alerts['2,2'] = {'color':'red','message':'Computer #139 needs replacing','color':'orange'}
        alerts['18,5'] = {'color':'red','message':'Computer #139 needs repairing','color':'red'}

        window.onload = function ()
        {
            // 25 "clusters of computers" (sticking to the datacenter analogy)
            for (var y=0; y<25; ++y) {
            
                // 60 "Computers per cluster" (sticking to the datacenter analogy)
                for (var x=0; x<60; ++x) {
                    var rect = new RGraph.Drawing.Rect('cvs',x*10,y*10,10,10);
                    rect.Set('strokestyle', 'rgba(0,0,0,0.05)');
                    //rect.Set('tooltips.event', 'onmousemove');

                    if (alerts[x+','+y]) {
                        rect.Set('fillstyle', alerts[x+','+y].color);
                        rect.Set('tooltips', [alerts[x+','+y].message]);
                    } else {
                        rect.Set('fillstyle', 'rgba(100,255,100,0.2)');
                    }

                    rect.Draw();
                }
            }
        }
    </script>


    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>